<template>
  <d2-container class="brushhandaudit">
    <template slot="header">刷手审核</template>
    <el-row :gutter="20">
      <el-col :span="3">
        <el-select size="small" v-model="activval" placeholder="刷手状态">
          <el-option
            v-for="item in activlist"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="3">
        <el-select size="small" v-model="auditval" placeholder="请选择">
          <el-option
            v-for="item in auditlist"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-input size="small" v-model="iptval" placeholder="请输入内容"></el-input>
      </el-col>
      <el-col :span="2">
        <el-button size="mini" type="primary" @click="onSearch">查询</el-button>
      </el-col>
    </el-row>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="刷手 ID">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="刷手姓名">
              <el-input type="text" v-model="props.row.t_name"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-select size="small" v-model="props.row.sex" placeholder="请选择">
                <el-option
                  v-for="item in sexTeacher"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="身份证">
              <span>{{ props.row.idcard }}</span>
            </el-form-item>
            <el-form-item label="身份证照片">
              <el-button size="mini" type="primary" @click="handleLook(props.row,1)" plain>查看</el-button>
            </el-form-item>
            <el-form-item label="旺旺号图片">
              <el-button size="mini" type="primary" @click="handleLook(props.row,2)" plain>查看</el-button>
            </el-form-item>
            <el-form-item label="手机号码">
              <a :href="'https://www.baidu.com/s?wd='+props.row.phone" target="_blank" style="color:red;">{{ props.row.phone }}</a>
            </el-form-item>
            <el-form-item label="职业">
              <span>{{ props.row.jobs }}</span>
            </el-form-item>
            <el-form-item label="刷手生日">
              <span>{{ props.row.birth }}</span>
            </el-form-item>
            <el-form-item label="地址">
              <span>{{ props.row.address }}</span>
            </el-form-item>
            <el-form-item label="邀请码">
              <el-input type="text" v-model="props.row.invitation"></el-input>
            </el-form-item>
            <el-form-item label="支付宝账号">
              <span>{{ props.row.alpay }}</span>
            </el-form-item>
            <el-form-item label="师傅佣金">
              <span>{{ props.row.b_money }}</span>
            </el-form-item>
            <el-form-item label="分组">
              <el-input type="text" v-model="props.row.group"></el-input>
            </el-form-item>
            <el-form-item label="师傅">
              <el-button size="mini" type="primary" plain @click="MasterLook(props.row.teacher)">查看</el-button>
            </el-form-item>
            <el-form-item label="操作密码">
              <span>{{ props.row.password }}</span>
            </el-form-item>
            <el-form-item label="角色">
              <el-select size="small" v-model="props.row.role" placeholder="请选择">
                <el-option
                  v-for="item in roleTeacher"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="旺旺号">
              <div style="display:flex;">
                <el-input type="text" v-model="props.row.taobao_name"></el-input>
                <el-button type="danger" style="margin-left:10px;"
                           :data-clipboard-text="props.row.taobao_name"
                           class="tag-read" @click="copy()">复制</el-button>
                <el-button type="primary" style="margin-left:10px;" @click="connects(props.row.taobao_name)">联系旺旺</el-button>
              </div>
            </el-form-item>
            <el-form-item label="刷手微信号">
              <span>{{ props.row.wxname }}</span>
            </el-form-item>
            <el-form-item label="审核人">
              <span>{{ props.row.admin }}</span>
            </el-form-item>
            <el-form-item label="用户状态">
              <el-select size="small" v-model="props.row.user_status" placeholder="请选择">
                <el-option
                  v-for="item in statusTeacher"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="Infochange(props.row)">修改</el-button>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="序号"
        type="index"
        align="center"
        width="60">
      </el-table-column>
      <el-table-column
        width="80"
        align="center"
        label="刷手头像">
        <template slot-scope="props">
          <img :src="props.row.tx_path" alt="" style="width:50px;height:50px;border-radius:50%;">
        </template>
      </el-table-column>
      <el-table-column
        width=""
        label="刷手姓名"
        align="center"
        prop="t_name">
      </el-table-column>
      <el-table-column
        width=""
        align="center"
        label="手机号"
        prop="phone">
      </el-table-column>
      <el-table-column
        width=""
        align="center"
        label="职业"
        prop="jobs">
      </el-table-column>
      <el-table-column
        label="地址"
        align="center"
        prop="address">
      </el-table-column>
      <el-table-column
        width=""
        label="创建时间"
        align="center"
        prop="addtime">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        align="center"
        width="">
        <template slot-scope="scope">
          <el-button @click="onSure(scope.row)" type="primary" size="mini" plain>通过</el-button>
<!--          -->
          <el-button @click="Dialog = true;refuse_row = scope.row" type="danger" size="mini" plain>拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="page"
      :page-size="20"
      layout="total, prev, pager, next"
      :total="total"
      style="text-align:right;margin:10px 0;">
    </el-pagination>
    <el-dialog
      :title="title"
      :visible.sync="cardImgDialog"
      width="30%"
      center>
      <el-image :src="cardimg">
        <div slot="placeholder" class="image-slot">
          加载中<span class="dot">...</span>
        </div>
      </el-image>
    </el-dialog>
<!--拒绝-->
    <el-dialog
      title="拒绝理由"
      :visible.sync="Dialog"
      width="30%"
      center>
      <div style="display:flex;">
        <span>拒绝理由:</span>
        <el-select v-model="refuseing" allow-create clearable filterable placeholder="请选择拒绝理由">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <br/>
      <el-button type="primary" @click="onRefused()">确认</el-button>
      <el-button type="primary" @click="Dialog = false">取消</el-button>
    </el-dialog>

    <el-dialog
      title="师傅信息"
      :visible.sync="Dialoging"
      width="30%"
      center>
      <div style="display:flex;flex-direction: column;">
        <span style="font-size:18px;">师傅ID:{{teacheruser.id}}</span>
        <br/>
        <span style="font-size:18px;">师傅姓名:{{teacheruser.t_name}}</span>
      </div>
      <!--       <el-button type="primary"   style="margin-top:10px;">确认</el-button>-->
    </el-dialog>
    <remote-js src="http://pv.sohu.com/cityjson?ie=utf-8"></remote-js>
  </d2-container>
</template>

<script>
import { audituserlist,audituser,SSrefuse,teacher_user,changeInfo } from '@api/sys.login'
import Clipboard from 'clipboard';
export default {
  name: 'brushhandaudit',
  data(){
    return{
      tableData:[],
      page:1,
      Dialoging:false,
      total:0,
      ip:'',
      refuseing:"",
      Dialog:false,
      activval:'',
      options:[
        {value: "心等级太低",label:"心等级太低"},
        {value: "周评价太高",label:"周评价太高"},
        {value: "差评号",label:"差评号"},
        {value: "降权号",label:"降权号"},
        {value: "旺旺不对",label:"旺旺不对"},
        {value: "低于一年号",label:"低于一年号"},
        {value: "手机号与身份证地址不否",label:"手机号与身份证地址不否"},
      ],
      roleTeacher: [
        {
          value: "1",
          label: "徒弟"
        },
        {
          value: "2",
          label: "师傅"
        },
      ],

      sexTeacher: [
        {
          value: "0",
          label: "未知"
        },
        {
          value: "1",
          label: "男"
        },
        {
          value: "2",
          label: "女"
        },
      ],
      statusTeacher:[
        {
          value: "1",
          label: "用户待审核"
        },
        {
          value: "2",
          label: "用户正常"
        },
        {
          value: "3",
          label: "用户冻结"
        },
        {
          value: "4",
          label: "用户审核中"
        },
      ],
      activlist:[
        {
          value: 1,
          label:'待审核',
        },
        {
          value: 2,
          label:'正常',
        },
        {
          value: 3,
          label:'冻结',
        },
        {
          value: 4,
          label:'审核中',
        }
      ],
      teacheruser:"",
      auditval:'',
      auditlist:[
        {
          value:'微信名称',
          label:'微信名称',
        },
        {
          value:'用户ID',
          label:'用户ID',
        },
        {
          value:'真实姓名',
          label:'真实姓名',
        },
        {
          value:'手机号码',
          label:'手机号码',
        },
        {
          value:'分组',
          label:'分组',
        },
        {
          value:'旺旺号',
          label:'旺旺号',
        },
        {
          value:'角色',
          label:'角色',
        },
        {
          value:'师傅微信',
          label:'师傅微信',
        }
      ],
      refuse_row:[],
      iptval:'',
      cardImgDialog:false,
      cardimg:'',
      title:'身份证照片'
    }
  },
  components:{
    'remote-js': {
      render(createElement) {
        return createElement('script', { attrs: { type: 'text/javascript', src: this.src }});
      },
      props: {
        src: { type: String, required: true },
      },
    },
  },
  mounted(){
    let params = {
      page:this.page,
      pageSize:20
    }
    this.getUserList(params)
  },
  methods:{
    baidu(phone){
       window.open(''+phone)
    },
    copy() {
      var clipboard = new Clipboard('.tag-read')
      clipboard.on('success', e => {

        this.$message.success("复制成功");//这里你如果引入了elementui的提示就可以用，没有就注释即可
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        // 不支持复制
        console.log('该浏览器不支持自动复制')
        // 释放内存
        clipboard.destroy()
      })
    },
    connects(val){
      window.open('https://amos.im.alisoft.com/msg.aw?v=2&uid='+val+'&site=cntaobao&s=1&charset=utf-8')
    },
    Infochange(row) {
      console.log(row.user_status);
      if(row.role ==  '师傅'){
        row.role = 2
      }else if(row.role == '徒弟'){
        row.role = 1
      }else{
        row.role = 0
      }
      if(row.user_status == "用户待审核"){
        row.user_status =1
      }else if(row.user_status == "用户正常"){
        row.user_status =2
      }else if(row.user_status == "用户冻结"){
        row.user_status =3
      }else if(row.user_status == "用户审核中"){
        row.user_status =4
      }
      console.log(row.sex);
      if(row.sex == '男'){
        row.sex = 1
      }else if(row.sex == '女'){
        row.sex = 2
      }else if(row.sex == '未知'){
        row.sex = 0
      }
      changeInfo(row.taobao_name, row.t_name, row.group, row.role, row.invitation, row.teacher, row.id,row.sex,row.user_status).then((res) => {
        console.log(res.data);let params = {
          page:this.page,
          pageSize:20
        }
        this.getUserList(params)
      })
    },
    MasterLook(teacher) {
      this.Dialoging = true
      teacher_user(teacher)
        .then((res) => {
          this.teacheruser = res.data
        })
    },
    handleCurrentChange(val) {
      this.page = val
      this.onSearch()
    },
    // 获取列表数据
    getUserList(params){
      audituserlist(params)
        .then((res) => {
          console.log('审核数据',res)
          this.tableData = res.data.map((item)=>{
            if(item.role == 2){
              item.role = '师傅'
            }else{
              item.role = '徒弟'
            }
            if(item.sex == 1){
              item.sex = '男'
            }else if(item.sex == 2){
              item.sex = '女'
            }else if(item.sex == 0){
              item.sex = '未知'
            }
            if(item.user_status == 1){
              item.user_status ="用户待审核"
            }else if(item.user_status == 2){
              item.user_status ="用户正常"
            }else if(item.user_status == 3){
              item.user_status ="用户冻结"
            }else{
              item.user_status ="用户审核中"
            }
            return item
          })
          this.total = res.count
        })
        .catch(() =>{
          this.tableData = []
          this.total = 0
        })
    },
    //查询
    onSearch(){
      let params = {
        page:this.page,
        pageSize:20,
        user_status:this.activval
      }
      this.auditval == '微信名称' ? params.wxnam = this.iptval
      : this.auditval == '真实姓名' ? params.t_name = this.iptval
      : this.auditval == '手机号码' ? params.phone = this.iptval
      : this.auditval == '分组' ? params.group = this.iptval
      : this.auditval == '旺旺号' ? params.taobao_name = this.iptval
      : this.auditval == '角色' ? params.role = this.iptval
      : this.auditval == '师傅微信' ? params.teachnam = this.iptval : ''
      this.getUserList(params)
    },
    // 通过
    //returnCitySN["cip"]
    onSure(row){
      audituser({
        address:'admin',
        user_id:row.id
      })
        .then((res) => {
          console.log(res);
          // if(){
          //
          // }
          this.page = 1
          this.onSearch()
        })
    },
    // 拒绝
    onRefused(){
      SSrefuse({
        note:this.refuseing,
        user_id:this.refuse_row.id
      })
        .then((res) => {
          console.log('拒绝',res)
          this.page = 1
          this.onSearch()
          this.Dialog = false
        })
    },
    //查看
    handleLook(row,idx){
      console.log('row',row)
      this.cardImgDialog = true
      idx == 1 ? this.cardimg = row.idcode_img : this.cardimg = row.tb_img
      idx == 1 ? this.title = '身份证照片' : this.title = '旺旺号图片'
    },
  }
}
</script>

<style lang="scss" scoped>

</style>
<style lang="scss">
.brushhandaudit{
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
}
</style>
